<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
		<meta name="misapplication-tap-highlight" content="no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>信息公司乐器</title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/base.css" />
		
		<style>
			
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
			    background-color: #00D4C5;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				color: #00D4C5;
			}
			 html,#slider,.mui-content{
                width: 100%;
                height: 100%;
            }
            body{
                margin-top: 0px;
                width: 100%;
               /* height: calc(100% - 45px);*/
              height: calc(100%);
            }
            .mui-slider-group{
               /* height: calc(100% - 45px);*/
                height: calc(100%);
            }           
            .mui-content{
				background-color: #FFFFFF;
				
			}
            .mui-control-content .mui-loading {
                margin-top: 50px;
            }
            .width{
				width: 100%;
			}
			li{
				list-style:none;
			}
			.imgStyle{
				margin: 3px;
			}
			.div1{
				padding-left: 10px;
				padding-top: 20px;
			}
			.div2{
				padding-top: 10px;
			}
			.div3{
				padding-left: 50px;
				padding-right: 50px;
			}
			.fontSize-20{
				font-size: 20px;
			}
			.pStyle{
				font-size: 15px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-right: 10px;
			}
			.borederTomm{
				border-bottom:1px solid #eeeeee;
				padding-bottom: 5px;
			}
			.float-button {
		         position: fixed;  //关键	         
		         width: 50px;
		         bottom: 50px;
		         right: 30px;	       
		         z-index: 2;         
		     }
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">个人乐器</h1>
		    <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" onclick="buyIssue()" style="color: white;border: none;">购买</button>
		</header>
		<div class="mui-content fill-all flex">
			<div id="slider" class="mui-slider flex-1 flex v-flex">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">
						发布列表
					</a>
					<a class="mui-control-item" href="#item2mobile">
						我的发布
					</a>
					
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6" ></div>
				<div class="mui-slider-group">
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                        <div id="scroll1" class="mui-scroll-wrapper">
                            <div class="mui-scroll">
                                
                                <div class="width borederTomm" onclick="musicalDetails('id1')">
                                	<div class="flex width div1" >
                                		<div class="flex-1">
											<img class="width" src="../img/head-01.png" />
							
										</div>
										<div class="flex-4 div2">
											<li >
												<span class="green fontSize-20">釜山钢琴</span>
										         <span class="gray">今天 12:31</span>
											</li>
											<li >
												<span class="green fontSize-20" >YAMAHA 雅马哈</span>
										         
											</li>
											<li >
										         <p class="gray pStyle" >立式钢琴全新初学者进口高端实木无敌贵你肯定买不起</p>
											</li>
											<div class="flex v-center">
												<img style="width: 30px;" src="../img/icon-phone.png"/>
											    <span>18711151201</span>
											</div>			
										</div>	
										
                                	</div>
                                	<div class="width flex div3">
											<img class="flex-1 imgStyle" src="../img/bg-03.png"/>
											<img class="flex-1 imgStyle" src="../img/bg-03.png"/>
											<img class="flex-1 imgStyle" src="../img/bg-03.png"/>
									</div>
                                </div>
                                
                                <div class="width borederTomm">
                                	<div class="flex width div1" >
                                		<div class="flex-1">
											<img class="width" src="../img/head-01.png" />
							
										</div>
										<div class="flex-4 div2">
											<li >
												<span class="green fontSize-20">釜山钢琴</span>
										         <span class="gray">今天 12:31</span>
											</li>
											<li >
												<span class="green fontSize-20" >YAMAHA 雅马哈</span>
										         
											</li>
											<li >
										         <p class="gray pStyle" >立式钢琴全新初学者进口高端实木无敌贵你肯定买不起</p>
											</li>
											<div class="flex v-center">
												<img style="width: 30px;" src="../img/icon-phone.png"/>
											    <span>18711151201</span>
											</div>			
										</div>	
										
                                	</div>
                                	<div class="width flex div3">
											<img class="flex-1 imgStyle" src="../img/bg-03.png"/>
											<img class="flex-1 imgStyle" src="../img/bg-03.png"/>
											<img class="flex-1 imgStyle" src="../img/bg-03.png"/>
									</div>
                                </div>
                                <div class="width borederTomm">
                                	<div class="flex width div1" >
                                		<div class="flex-1">
											<img class="width" src="../img/head-01.png" />
							
										</div>
										<div class="flex-4 div2">
											<li >
												<span class="green fontSize-20">釜山钢琴</span>
										         <span class="gray">今天 12:31</span>
											</li>
											<li >
												<span class="green fontSize-20" >YAMAHA 雅马哈</span>
										         
											</li>
											<li >
										         <p class="gray pStyle" >立式钢琴全新初学者进口高端实木无敌贵你肯定买不起</p>
											</li>
											<div class="flex v-center">
												<img style="width: 30px;" src="../img/icon-phone.png"/>
											    <span>18711151201</span>
											</div>			
										</div>	
										
                                	</div>
                                	<div class="width flex div3">
											<img class="flex-1 imgStyle" src="../img/bg-03.png"/>
											<img class="flex-1 imgStyle" src="../img/bg-03.png"/>
											<img class="flex-1 imgStyle" src="../img/bg-03.png"/>
									</div>
                                </div>                               
                            </div>
                        </div>
                    </div>
                    <div id="item2mobile" class="mui-slider-item mui-control-content">
                        <div id="scroll2" class="mui-scroll-wrapper">
                            <div class="mui-scroll">
                                <div class="mui-loading">
                                    <div class="mui-spinner">
                                    	
                                    	
                                    	
                                    </div>
                                </div>
                            </div>
                        </div>
				    </div>
				</div>
				<!--<div class="flex-1 mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active"style="background-color: #000000;">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									
									<li class="mui-table-view-cell">
										第一个选项卡子项-2
									</li>
									<li class="mui-table-view-cell">
										第一个选项卡子项-3
									</li>
									<li class="mui-table-view-cell">
										第一个选项卡子项-4
									</li>
									
									
									
									
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-loading">
									<div class="mui-spinner">
									</div>
								</div>
							</div>
						</div>

					</div>
					
				</div>-->
				<!--<div class="flex-2 flex">
					<div id="item1mobile" class="mui-control-content mui-active">
						<div id="scroll" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-control-content">
						<div class="flex h-center div5 div4" >
						</div>			
					</div>	
				</div>-->
				
				
			</div>

		</div>
		 <div class="float-button" onclick="issue()"> 
         
		     <img style="width: 70px;" src="../img/button-add.png"/>
		 
		 </div>
		
		
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="../js/local-keys.js"></script>
		<script src="../js/utils.js"></script>
		<script>
			(function($) {
					$('.mui-scroll-wrapper').scroll({
						indicators: true //是否显示滚动条
					});
					//var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
				//	var html2 = '<div class="width borederTomm" onclick="musicalDetails(\''+"id2"+'\')"><div class="flex width div1" ><div class="flex-1"><img class="width" src="../img/head-01.png" /></div><div class="flex-4 div2"><li ><span class="green fontSize-20">真的好钢琴</span><span class="gray">今天 12:31</span></li><li ><span class="green fontSize-20" >HAMAHA 哈哈哈</span></li><li ><p class="gray pStyle" >立式钢琴全新初学者进口高端实木无敌贵你肯定买不起</p></li><div class="flex v-center"><img style="width: 30px;" src="../img/icon-phone.png"/><span>18711151201</span></div></div></div><div class="width flex div3"><img class="flex-1 imgStyle" src="../img/bg-03.png"/><img class="flex-1 imgStyle" src="../img/bg-03.png"/><img class="flex-1 imgStyle" src="../img/bg-03.png"/></div></div><div class="width borederTomm"><div class="flex width div1" ><div class="flex-1"><img class="width" src="../img/head-01.png" /></div><div class="flex-4 div2"><li ><span class="green fontSize-20">真的好钢琴</span><span class="gray">今天 12:31</span></li><li ><span class="green fontSize-20" >HAMAHA 哈哈哈</span></li><li ><p class="gray pStyle" >立式钢琴全新初学者进口高端实木无敌贵你肯定买不起</p></li><div class="flex v-center"><img style="width: 30px;" src="../img/icon-phone.png"/><span>18711151201</span></div></div></div><div class="width flex div3"><img class="flex-1 imgStyle" src="../img/bg-03.png"/><img class="flex-1 imgStyle" src="../img/bg-03.png"/><img class="flex-1 imgStyle" src="../img/bg-03.png"/></div></div><div class="width borederTomm"><div class="flex width div1" ><div class="flex-1"><img class="width" src="../img/head-01.png" /></div><div class="flex-4 div2"><li ><span class="green fontSize-20">真的好钢琴</span><span class="gray">明天 12:31</span></li><li ><span class="green fontSize-20" >HAMAHA 哈哈哈</span></li><li ><p class="gray pStyle" >立式钢琴全新初学者进口高端实木无敌贵你肯定买不起</p></li><div class="flex v-center"><img style="width: 30px;" src="../img/icon-phone.png"/><span>18711151201</span></div></div></div><div class="width flex div3"><img class="flex-1 imgStyle" src="../img/bg-03.png"/><img class="flex-1 imgStyle" src="../img/bg-03.png"/><img class="flex-1 imgStyle" src="../img/bg-03.png"/></div></div>';
				    var html2 = '<div class="width borederTomm" onclick="musicalDetails(\''+"id2"+'\')"><div class="flex width div1" ><div class="flex-1"><img class="width" src="../img/head-01.png" /></div><div class="flex-4 div2"><li ><span class="green fontSize-20">釜山钢琴</span><span class="gray">今天 12:31</span></li><li ><span class="green fontSize-20" >YAMAHA 雅马哈</span></li><li ><p class="gray pStyle" >立式钢琴全新初学者进口高端实木无敌贵你肯定买不起</p></li><div class="flex v-center"><img style="width: 30px;" src="../img/icon-phone.png"/><span>18711151201</span></div></div></div><div class="width flex div3"><img class="flex-1 imgStyle" src="../img/bg-03.png"/><img class="flex-1 imgStyle" src="../img/bg-03.png"/><img class="flex-1 imgStyle" src="../img/bg-03.png"/></div></div>';
					
					var item2 = document.getElementById('item2mobile');
					
					document.getElementById('slider').addEventListener('slide', function(e) {
						var selects = e.detail.slideNumber;
					//	document.getElementById("sliderProgressBar").style.marginLeft = (selects * 20) + "%";
						if(selects === 1) {
							if(item2.querySelector('.mui-loading')) {
								setTimeout(function() {
									item2.querySelector('.mui-scroll').innerHTML = html2;
								}, 500);
							}
						} 
					});
				}

			)(mui);
//			mui.plusReady(function() {
//					mui("ul li").on("tap", "button", function() {
//						mui.openWindow({
//							url: "book-detail.html",
//							extras: {
//								uids: "1"
//							}
//						});
//					});
//				}
//
//			);
			
			//点击跳进详情
			function musicalDetails(id){
				
				if(id == "id1"){    //发布列表跳进详情页
					printLog("发布列表");
				}else if(id == "id2"){    //我的发布跳进详情页
					printLog("我的发布");
				}
				
				mui.openWindow({
					url: "message-issue-details.html",
					id:"message-issue-details.html",
				    extras:{
				        name:id
				    }
			    });
			}
			//发布按钮,需要判断该用户有没有进行信息审核,没进行信息审核的话要先审核,才能发布
			function issue(){
				printLog("发布页面");
				if(true){    //如果没有发布权限,就要审核,正在审核也要跳进这个界面
					mui.openWindow({
					     url: "message-audit-company.html"
					
				   
			         });
				}else {     //发布界面
					mui.openWindow({
					     url: "message-issue.html"
					
				   
			         });
				}
				
			}
			//购买发布量
			function buyIssue(){
				mui.openWindow({
				    url: "message-buy-issue.html"
					
				   
			    });
			}
			
		</script>

	</body>
</html>
